<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>WiLearning Admin</mat-toolbar>
    <mat-nav-list>
        <a mat-list-item routerLink="/nav/room" [class.active]="redirectedUrl === '/nav/room'">
          <mat-icon matListIcon>home</mat-icon>
          <span matLine>
            {{i18n.lang.roomManage}}
          </span>
        </a>
        <a mat-list-item routerLink="/nav/monitor" [class.active]="redirectedUrl === '/nav/monitor'">
          <mat-icon matListIcon>visibility</mat-icon>
          <span matLine>
            {{i18n.lang.roomMonitor}}
          </span>
        </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
    </mat-toolbar>
    <!-- Add Content Here -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
